import { SvgIcon } from '../svgIcon';
import { useToggle } from '../utils/useToggle';
import { Button } from './index';
export default function InputDemo() {
  return (
    <div class="py-3">
      <div class="text-color/60 mb-1 mx-5">基础用法</div>
      <div class="bg-white flex flex-wrap py-3 px-5 gap-1">
        <Button type="primary">主题按钮</Button>
        <Button type="secondary">次要按钮</Button>
        <Button>默认按钮</Button>
        <Button type="primary" class="!bg-cyan-400">
          默认按钮11
        </Button>
        <Button plain type="primary">
          镂空按钮
        </Button>
        <Button plain type="secondary">
          镂空按钮
        </Button>
        <Button class="bg-blue-500 text-white">自定义颜色</Button>
        <Button plain class="text-amber-500">
          自定义线框
        </Button>
      </div>
      <div class="text-color/60 mt-3 mb-1 mx-5">禁用按钮</div>
      <div class="bg-white py-3 px-5 space-x-[3px]">
        <Button disabled type="primary">
          主题禁用
        </Button>
        <Button disabled>默认禁用</Button>
        <Button disabled type="secondary">
          secondary主题
        </Button>
      </div>
      <div class="text-color/60 mb-1 mx-5 mt-5">自定义大小、样式、圆角</div>
      <div class="bg-white p-5">
        <div class="space-x-1">
          <Button type="primary" size="small">
            小按钮
          </Button>
          <Button type="primary">默认按钮</Button>
          <Button type="primary" size="large">
            大按钮
          </Button>
          <Button class="bg-yellow-600 text-white  !h-14 rounded-lg text-lg">
            自定义大小 h-14
          </Button>
        </div>
        <div class="mt-2 space-y-[5px]">
          <Button type="primary" class="text-lg rounded-full !h-16 w-full">
            !h-16 w-full rounded-full text-lg
          </Button>
        </div>
      </div>
      <div class="text-color/60 mb-1 mx-5 mt-5">加载状态</div>
      <div class="bg-white p-5 space-x-[5px]">
        <Button type="primary" loading />
        <Button type="primary" loading disabled>
          disabled
        </Button>
        <Button type="secondary" loading>
          加载中...
        </Button>
      </div>
      <div class="text-color/60 mb-1 mx-5 mt-5">异步防抖</div>
      <div class="bg-white p-5 space-x-[5px]">
        <Button
          loading="auto"
          type="primary"
          onClick={async (e) => {
            console.log(e);
            return new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve();
              }, 3000);
            });
          }}
        >
          异步防抖
        </Button>
      </div>
      <div class="text-color/60 mb-1 mx-5 mt-5">来点花样</div>
      <div class="bg-white p-5 space-x-[5px]">
        <Button class="!border-[red] border-dashed text-[red]" plain>
          虚线边框
        </Button>
        <Button type="primary" class="bg-gradient-to-r from-[#ff0000] to-[#7367F0] text-white">
          渐变按钮
        </Button>
      </div>
    </div>
  );
}
